<template>
  <div class="statistics-container">
    <div class="page-header">
      <h2>统计报表</h2>
      <p>系统数据统计分析</p>
    </div>
    
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <div class="stat-card">
            <div class="stat-number">{{ totalFeedbacks }}</div>
            <div class="stat-label">总反馈数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="stat-card">
            <div class="stat-number">{{ totalGridMembers }}</div>
            <div class="stat-label">网格员总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="stat-card">
            <div class="stat-number">{{ processedFeedbacks }}</div>
            <div class="stat-label">已处理反馈</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>月度统计</span>
          </template>
          <div style="height: 300px; display: flex; align-items: center; justify-content: center;">
            <div style="color: #999;">图表功能待实现</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'AdminStatistics',
  setup() {
    const store = useStore()
    const totalFeedbacks = ref(0)
    const totalGridMembers = ref(0)
    const processedFeedbacks = ref(0)
    
    const loadStatistics = async () => {
      try {
        const data = await store.dispatch('data/getStatistics')
        totalFeedbacks.value = data.totalFeedbacks || 0
        totalGridMembers.value = data.totalGridMembers || 0
        processedFeedbacks.value = data.processedFeedbacks || 0
      } catch (error) {
        console.error('Failed to load statistics:', error)
      }
    }
    
    onMounted(() => {
      loadStatistics()
    })
    
    return {
      totalFeedbacks,
      totalGridMembers,
      processedFeedbacks
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  
  h2 {
    margin: 0 0 8px 0;
    color: #333;
  }
  
  p {
    margin: 0;
    color: #666;
  }
}

.stat-card {
  text-align: center;
  padding: 20px;
  
  .stat-number {
    font-size: 48px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 10px;
  }
  
  .stat-label {
    font-size: 14px;
    color: #666;
  }
}
</style> 